<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom ref="HeadCustom" :isSpace="false" :isCircle="true" :isBlur="false" :isBack="isApp" :isChange="!isApp"></HeadCustom>
		<view class="form-box">
			<view class="hd"></view>
			<view class="bd fboxCol Ycenter">
				<view v-for="(item, index) in infoList" :key="index">
					<view v-if="item.key == 'avatar'" class="avatar">
						<u-upload :fileList="formData.fileList" @afterRead="afterRead" :maxCount="1"></u-upload>
					</view>
					<view v-else-if="item.key == 'code'" class="code input fboxRow Ycenter">
						<view class="flex1 fboxRow Ycenter">
							<u-input placeholderStyle="font-size:28rpx;color:#c8c9cc" border="none"
								v-model.trim="formData[item.key]" :placeholder="item.placeholder"
								:maxlength="item.maxlength"></u-input>
						</view>
						<u-button @tap="getCode" class="btn-code color-fff"
							:disabled="Boolean(isTime)">{{isTime ? isTime+'S' : '发送验证码'}}</u-button>
					</view>
					<view v-else class="input fboxRow Ycenter">
						<u-input placeholderStyle="font-size:28rpx;color:#c8c9cc" border="none"
							v-model.trim="formData[item.key]" :placeholder="item.placeholder"
							:maxlength="item.maxlength"></u-input>
					</view>
				</view>
				<view class="tit fboxRow Ycenter color-a1a3cc">推荐人：</view>

				<view class="input mt20 fboxRow Ycenter">
					<u-input placeholderStyle="font-size:28rpx;color:#c8c9cc" border="none"
						v-model.trim="formData.referrerMobile" maxlength="11" placeholder="请输入推荐人手机号(非必填)"></u-input>
				</view>
				<u-button class="btn-submit font34 color-fff fwb" @click="submit">注册并递交名片</u-button>
			</view>
			<view class="space60"></view>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from '@/static/js/common.js';
	import {
		validPhone
	} from '@/static/js/validate.js';
	import {
		picCompress
	} from '@/static/js/picCompress'
	// 接口
	import {
		leadRegister
	} from '@/api/h5.js'
	import {
		fileUploadAnon,
		notifySms
	} from '@/api/index.js';

	export default {
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				infoList: [
					// {
					//   key: 'avatar',
					//   placeholder: '请选择头像'
					// },
					{
						key: 'realName',
						placeholder: '请输入姓名',
						maxlength: 6
					},
					// {
					//   key: 'company',
					//   placeholder: '请输入所在企业'
					// },
					// {
					//   key: 'jobTitle',
					//   placeholder: '请输入职位'
					// },
					{
						key: 'mobile',
						placeholder: '请输入自己手机号',
						maxlength: 11
					},
					{
						key: 'code',
						placeholder: '请输入验证码',
						maxlength: 6
					}
				],

				formData: {
					avatar: '',
					realName: '',
					company: '',
					jobTitle: '',
					mobile: '',
					code: '',
					fileList: [],
					bestowCompanyId: '',
					referrerMobile: ''
				},
				id: '',
				linkData: {},
				isTime: 0,
				isApp: false
			}
		},
		onLoad(option) {
			if(option && option.isApp){
				this.isApp = true;
			}
		},
		methods: {
			getCode: throttle(function(event) {
				if (this.isTime) {
					this.tips('短信发送过快')
					return
				}
				if (validPhone(this.formData.mobile)) {
					notifySms({
						mobile: this.formData.mobile,
						type: 'REG'
					}).then((res) => {
						if (res.code == 0) {
							this.codeTime()
						}
						this.tips(res.message)
					})
				} else {
					this.tips('请输入正确的手机号码')
				}
			}),
			submit: throttle(function(event) {
				
				if (validPhone(this.formData.mobile)) {					
					delete this.formData.fileList
					leadRegister(this.formData).then((res) => {
					  if (res.code == 0 && res.data) {
						const form = JSON.stringify(this.formData)
						sessionStorage.setItem('register_info', form)
						this.$pageTo('/mineQrCode?id='+ res.data)
					  } else if (res.code == 0 && !res.data) {
						  uni.showModal({
						  	title: '提示',
						  	content: '您的手机号码已注册，请前往下载APP使用',
							confirmText: '去下载',
							confirmColor: '#3232C6',
						  	success: (res)=> {
						  		if (res.confirm) {
									this.$pageTo('/directDownload')
						  		} else if (res.cancel) {
						  			console.log('用户点击取消');
						  		}
						  	}
						  });
					  }
					  console.log(res)
					})
				} else {
					this.tips('请输入正确的手机号码')
				}
			}),
			tips(title) {
				uni.showToast({
					icon: 'none',
					title
				})
			},
			codeTime() {
				let num = 60
				const timer = setInterval(() => {
					num--
					if (num == 0) {
						this.isTime = false
						clearInterval(timer)
					}
					this.isTime = num
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		min-height: calc(100vh);
		background: #4e4ee7 url('https://ebc-prod.cdn.benwunet.com/uni-static/h5/bg-register.png') no-repeat top center;
		background-size: 750rpx auto;
	}
	.space60{height: 120rpx;}

	.hd {
		height: 510rpx;
	}

	.bd {
		margin: 0 auto;
		width: 639rpx;
		padding: 100rpx 0 70rpx;
		background: #ffffff;
		border: 14rpx solid #5268ef;
		box-shadow: 0 0 27rpx 0 rgba(50, 50, 198, 0.64);
		border-radius: 50rpx;
	}

	.input {
		margin-bottom: 34rpx;
		padding: 0 32rpx;
		width: 528rpx;
		height: 80rpx;
		background: #f5f5fa;
		border-radius: 40rpx;
	}

	.btn-code {
		margin-right: -32rpx;
		padding: 0;
		width: 208rpx;
		height: 80rpx;
		background: #3232c6;
		color: #fff;
		border-radius: 0 40rpx 40rpx 0;
		border: 0;
	}

	.tit {
		width: 528rpx;
	}

	.btn-submit {
		margin-top: 70rpx;
		width: 528rpx;
		height: 81rpx;
		background: linear-gradient(0deg, #fe8b11 0%, #ffbb27 99%);
		border-radius: 40rpx;
		border: 0;
	}
</style>